<template>
  <div class="body">
    <div class="common-layout">
      <el-container>
        <el-header>Header</el-header>
        <el-main>
          <div class="left">
            <img src="@/assets/findImg/images/话题详情_03.jpg" alt="">
          </div>
          <div class="right">
            <div class="gzBox1">
              <div><p>话题作者</p></div>
              <div><p>欧阳妹妹</p>
                  <p>暂时还没有个人签名</p>
              </div>
              <div>
                <p>笔记<span>粉丝</span><span>获赞和收藏</span></p>
                <p>144<span>4122</span><span>1234</span></p>
              </div>
            </div>
          </div>
          <div class="xght">
            <p>相关话题</p>
            <div class="text" v-for="item in 7">
              <img src="@/assets/findImg/images/bb_12.jpg" alt="">
              <p>女孩子应该拥有一件皮衣，配裙子配裤子真的配什么都好</p>
            </div>
          </div>
          <img src="@/assets/findImg/images/last_03.jpg" alt="" class="last">
        </el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </div>
    </div>
  </template>
  

<script setup>
</script>

<style lang="scss" scoped>
*{
  padding: 0;
  margin: 0;
}
.body{
  background-color: #f8f8f8;
}
.common-layout {
  width: 80%;
  margin: auto;
  overflow-y: hidden;
  .left{
    width: 600px;
    height: 750px;
    
  }
  .right{
    position: absolute;
    width: 340px;
    height: 166px;
    left: 950px;
    top: 70px;
    box-shadow: 1px 1px 5px #666666;
    div{
      margin: 20px 10px;
    }
    span{
      margin-left: 20px;
    }
  }
  .xght{
    width: 345px;
    height: 495px;
    position: absolute;
    left: 950px;
    top: 270px;
    overflow: hidden;
    overflow-y: auto;
    .text{
      margin-top: 10px;
      display: flex;
      img{
      width: 70px;
      height: 70px;
    }
    p{
      margin-left: 10px;
    }
    }
    
  }
  .last{
    margin: 20px 5px;
  }
}
</style>